<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=1024"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>ThinkCMF {$site_info.site_name|default=''}</title>
    <meta name="description" content=""/>

    <link href="__TMPL__/demo/public/assets/css/demo.css" rel="stylesheet"/>
    <link href="__TMPL__/demo/public/assets/css/style.css" rel="stylesheet"/>

</head>
<body>
<!--<div class="fallback-message">-->
<!--<p>你的浏览器太古老<b>，缺少必要的运行本程序的特征</b>，你只能看到一个简单表现的版本。</p>-->
<!--<p>为了达到最佳的体验效果，请使用最新的<b>谷歌浏览器</b> 或 苹果<b>Safari</b>浏览器，或最新版的火狐浏览器 10 和 IE 10 也可以。</p>-->
<!--</div>-->

<div id="impress" data-autoplay="27">
    <div class="step slide" data-x="-1000" data-y="-1500">
        <q>你是否正在寻找一款真正属于自己的开源免费框架？</q>
    </div>
    <div class="step slide" data-x="0" data-y="-1500">
        <q>你是否希望这款框架同时支持RESTful API开发？</q>
    </div>
    <div class="step slide" data-x="1000" data-y="-1500">
        <q>你是否正在考虑使用<strong>swoole</strong>提升你的程序执行效率？</q>
    </div>
    <div class="step slide" data-x="2000" data-y="-1500">
        <q>你是否希望使用<strong>websocket</strong>做一款实时应用？</q>
    </div>
    <div class="step slide" data-x="3000" data-y="-1500">
        <q>你是否也希望它拥有良好的扩展性，方便二次开发？</q>
    </div>
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">那么，你应该试一试</span>
        <h1>ThinkCMF</h1>
    </div>
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>它是一款真正<strong>开源免费</strong>的<b>内容管理框架</b>
            帮你提升开发效率，<br>
            节约时间陪家人!</p>
    </div>
    <div id="mit" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>开源协议<b>MIT</b> 更<span class="thoughts">自由</span>更宽松</p>
    </div>
    <div id="thinkphp" class="step" data-x="2825" data-y="2325" data-z="-600" data-rotate="300" data-scale="1">
        <p>基于<b>ThinkPHP6.0</b>，文档全面</p>
    </div>
    <div id="swoole" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
        <p>
            支持<b>swoole</b>，性能更强劲
            <!--在无限的画布上通过<b class="positioning">定位</b>，<b class="rotating">旋转</b>和<b class="scaling">缩放</b>把它们表现出来-->
        </p>
    </div>
    <div id="websocket" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p>支持<strong>websocket</strong>,更方便创建实时应用</p>
    </div>
    <div id="restful-api" class="step" data-x="8700" data-y="-300" data-rotate="90" data-scale="6">
        <p>支持<strong>RESTful API开发</strong>,更方便开发小程序和app</p>
    </div>
    <div style="width: 900px;" class="step" data-x="12700" data-y="-300" data-rotate="180" data-scale="6">
        <p>
            良好的扩展性:<br><strong>多应用</strong>，<strong>插件扩展</strong>，
            <strong>多模板</strong>，<br><strong>可视化模板设计</strong>
        </p>
    </div>
    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>想了解更多？</p>
        <q><a href="https://www.thinkcmf.com">来官方网站看看！</a></q>
    </div>
    <!--<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">-->
    <!--<p>最后总结一下...</p>-->
    <!--</div>-->
    <!--<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10"-->
    <!--data-scale="0.5">-->
    <!--<q><b>ThinkCMF</b>做一款你的专属框架！</q>-->
    <!--<div>◆ 基于MIT开源协议，更自由</div>-->
    <!--<div>◆ 基于ThinkPHP5.1，文档全面</div>-->
    <!--<div>◆ 支持swoole(beta)，性能更强劲</div>-->
    <!--<div>◆ 支持websocket(beta)</div>-->
    <!--<div>◆ 支持RESTful API开发</div>-->
    <!--<div>◆ composer加载CMF核心包及应用</div>-->
    <!--</div>-->

    <!--<div id="introduce" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">-->
    <!--<q><b>ThinkCMF</b>做一款你的专属框架！</q>-->
    <!--<div>◆ 基于MIT开源协议，更自由</div>-->
    <!--<div>◆ 基于ThinkPHP5.1，文档全面</div>-->
    <!--<div>◆ 支持swoole(beta)，性能更强劲</div>-->
    <!--<div>◆ 支持websocket(beta)</div>-->
    <!--<div>◆ 支持RESTful API开发</div>-->
    <!--<div>◆ composer加载CMF核心包及应用</div>-->
    <!--</div>-->

    <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
    </div>

</div>

<div class="hint">
    <p>请用键盘上的方向键或空格键导航</p>
</div>
<script>
    if ("ontouchstart" in document.documentElement) {
        document.querySelector(".hint").innerHTML = "<p>左右滑动</p>";
    }
</script>

<script src="__TMPL__/demo/public/assets/js/impress.js"></script>
<script>impress().init();</script>


</body>
</html>

